<template>
    <div class="login-container">
        <el-form ref="loginForm"
                 :model="loginForm"
                 :rules="loginRules"
                 class="login-form"
                 auto-complete="on"
                 label-position="left">
            <img class="logo" src="@/assets/image/logo.png"/>
            <h3 class="title"> 病案首页智能质控系统 | 登录 </h3>
            <el-form-item label="账号" prop="username">
                <el-input
                    v-model="loginForm.username"
                    name="username"
                    type="text"
                    auto-complete="on"
                    @keyup.enter.native="handleLogin"
                    placeholder="请输入账号"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input
                    type="password"
                    v-model="loginForm.password"
                    name="password"
                    auto-complete="on"
                    show-password
                    placeholder="请输入密码"
                    @keyup.enter.native="handleLogin"/>
            </el-form-item>
            <el-form-item label="" class="btn">
                <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
                    登录
                </el-button>
            </el-form-item>
            <div class="tips-box" v-if="!cloudMode">
                <p v-if="!isValid">软件还未授权，请联系售后人员进行授权</p>
                <p v-else-if="isShow">软件使用时间还剩余 <span>{{timeLeft}}</span> 天，到期后将不能使用</p>
            </div>
        </el-form>
        <p class="copy-right" :class="{'is-short': isShort}">康卫通信息科技成都有限公司版权所有{{version}}版本</p>
    </div>
</template>

<script>
    import permission from '@/assets/json/permission.json'
    import {getSystemInfo} from '@/api/global/index'
    import Cookie from 'js-cookie'

    export default {
        name: 'Login',
        data () {
            return {
                // 登录表单
                loginForm: {
                    username: '',
                    password: ''
                },
                // 登录规则
                loginRules: {
                    username: [{required: true, message: '账号不能为空', trigger: ['blur', 'change']}],
                    password: [{required: true, message: '密码不能为空', trigger: ['blur', 'change']}]
                },
                // 是否加载
                loading: false,
                // 重定向
                redirect: undefined,
                // 路由
                routes: [],
                // 是否授权
                isValid: true,
                // 是否小于7天显示
                isShow: false,
                // 剩余天数
                timeLeft: 0,
                // 版本号
                version: '',
                // 是小屏，高度小于620
                isShort: false,
                // 是否是云端部署，true云端，false本地
                cloudMode: true
            }
        },
        watch: {
            $route: {
                /**
                 * 检测路由
                 */
                handler: function (route) {
                    this.redirect = route.query && route.query.redirect
                },
                immediate: true
            }
        },
        created () {
            if (Cookie.get('timeOut')) {
                this.$message.warning('登录超时或没有权限访问，请重新登录!')
                Cookie.remove('timeOut')
            }
            this.getInfo()
            this.isShort = document.body.clientHeight < 620
            window.onresize = () => {
                this.isShort = document.body.clientHeight < 620
            }
        },
        methods: {
            /**
             * 获取授权版本信息
             */
            getInfo () {
                getSystemInfo().then(res => {
                    if (res.code.toString() === '200') {
                        this.isValid = res.data.isValid
                        let authTime = new Date(res.data.expriedTime).getTime()
                        let now = new Date().getTime()
                        this.isShow = authTime - now < 30 * 86400000
                        if (!res.data.cloudMode) {
                            this.timeLeft = Math.ceil((authTime - now) / 86400000)
                            Cookie.set('timeLeft', this.timeLeft)
                        }
                        this.version = res.data.version
                        this.cloudMode = res.data.cloudMode
                        localStorage.setItem('cloudMode', res.data.cloudMode)
                    }
                })
            },
            /**
             * 登录
             */
            handleLogin () {
                this.$refs.loginForm.validate(valid => {
                    this.loading = true
                    if (valid && this.isValid) {
                        this.$store.dispatch('user/login', this.loginForm).then((res) => {
                            this.loading = false
                            if (res.code.toString() === '200') {
                                this.$router.push({name: this.firstMenu(res.data.权限)})
                                // this.$router.push({path: this.redirect || '/'})
                            } else {
                                this.$message.error(res.message)
                            }
                        }).catch(err => {
                            this.loading = false
                            this.$message.error(err.message)
                        })
                    } else {
                        this.loading = false
                        return false
                    }
                })
            },
            /**
             * 根据权限获取第一权限
             * @param data 权限列表
             */
            firstMenu (data) {
                if (data.includes(9999)) {
                    return 'System'
                } else {
                    for (let i in permission) {
                        for (let j in permission[i].children) {
                            if (data.indexOf(permission[i].children[j].code) !== -1) {
                                return permission[i].children[j].id
                            }
                        }
                    }
                }
                return 'System'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .login-container {
        padding-top: 140px;
        height: 100%;
        position: relative;
        .login-form {
            width: 420px;
            height: 400px;
            border: 1px solid #dcdfe6;
            padding: 45px 35px 15px;
            box-sizing: border-box;
            margin: 0 auto;
            box-shadow: 0 0 25px #909399;
            border-radius: 4px;
            .logo {
                width: 210px;
                height: 80px;
                display: block;
                margin: 0 auto;
            }
            .title {
                text-align: center;
                color: #51586a;
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 20px;
                margin-top: 5px;
            }
            .el-form-item {
                width: 350px;
                .el-input {
                    width: 300px;
                }
                .el-form-item__error {
                    left: 50px;
                }
                &.btn {
                    display: flex;
                    justify-content: flex-end;
                    .el-button {
                        width: 300px!important;
                        background: #409EFF;
                    }
                }
            }
            .tips-box {
                p {
                    margin: 0;
                    span {
                        font-size: 20px;
                        font-weight: 600;
                        color: #e21f06;
                    }
                }
            }
        }
        .copy-right {
            position: absolute;
            bottom: 20px;
            width: 100%;
            margin: 0;
            text-align: center;
            color: #999;
            &.is-short {
                position: relative;
                bottom: 0;
                margin-top: 42px;
            }
        }
    }
</style>
